<template>
  <div class="container_input">
    <div class="box3">
      <h2>录入产品</h2>
    </div>
    <div class="div-item">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="产品名称" prop="proName">
          <el-input v-model="ruleForm.proName" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="认证名称" prop="authName">
          <el-select v-model="ruleForm.authName" placeholder="请选择认证名称">
            <el-option label="CCC认证" value="shanghai"></el-option>
            <el-option label="信息安全认证" value="beijing"></el-option>
            <el-option label="CE认证" value="shanghai"></el-option>
            <el-option label="RoHS认证" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="产品状态" prop="proStatus">
          <el-radio v-model="ruleForm.proStatus" label="未发起审批"></el-radio>
          <el-radio v-model="ruleForm.proStatus" label="待审批"></el-radio>
          <el-radio v-model="ruleForm.proStatus" label="已完成"></el-radio>
        </el-form-item>

        <el-form-item label="截止时间" required>
          <el-col :span="3">
            <el-form-item prop="deadline">
              <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择截止日期"
                              v-model="ruleForm.deadline"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="3">--</el-col>
          <el-col :span="7">
            <!--这个其实用不上-->
            <el-form-item prop="date2">
              <el-time-picker placeholder="选择时间" v-model="ruleForm.deadMinute"></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="负责人" prop="charger" style="margin-left: -15px">
          <el-input v-model="ruleForm.charger" style="margin-left: 15px; width: 500px"></el-input>
        </el-form-item>

        <el-form-item label="备注" prop="notes" style="margin-left: -30px">
          <el-input type="textarea" v-model="ruleForm.notes" style="margin-left: 30px; width: 500px "></el-input>
        </el-form-item>

      </el-form>
    </div>

    <div class="ctrl_button">
      <el-form>
        <el-form-item style="margin-top: 30px">
          <div style="display: flex">
            <div style="flex:1; width: 33%;">
              <el-button type="primary" @click="submitSingle">提交数据</el-button>
              <i class="el-icon-upload" style="padding-left: 5px; font-size: 20px"></i>
            </div>
            <div style="flex:1; width: 33%">
              <!--批量导入-->
              <!--这里的token需要改一下-->
              <el-upload action="http://localhost:8080/file/inputMulti" :headers="{token: this.token}"
                         :show-file-list="false" :on-success="handleInputMulti">
                <el-button type="success">批量导入</el-button>
                <i class="el-icon-folder-opened" style="padding-left: 5px; font-size: 20px"></i>
              </el-upload>
            </div>
            <div style="flex:1; width: 33%">
              <el-button @click="resetForm">重置表单</el-button>
              <i class="el-icon-delete" style="padding-left: 5px; font-size: 20px"></i>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>

  </div>


</template>

<script>

import request from "@/utils/request";

export default {
  name: "Input",
  proInfo: [],

  data() {
    return {

      ruleForm: { //表单提交的产品信息
        id: '',
        proName: '',
        authName: '',
        startDate: '2020-02-03', //获取当前日期
        deadline: '', //认证截止日期
        proStatus: '', //产品状态——待输入、待审批、已完成
        charger: '', //负责人-测试项目经理
        notes: '', //备注

        deadMinute: '' //截止时-分-秒——用不上
      },

      rules: {
        proName: [
          {required: true, message: '请输入产品名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        authName: [
          {required: true, message: '请选择认证名称', trigger: 'change'}
        ],

        proStatus: [
          {required: true, message: '请选择产品状态', trigger: 'change'}
        ],

        dateDdl: [
          {type: 'date', required: true, message: '请选择截止日期', trigger: 'change'}
        ],
        /*type: [
          {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
        ],*/
        charger: [
          {required: true, message: '请输入项目负责人-测试项目经理', trigger: 'change'}
        ],
        notes: [
          {required: true, message: '请填写备注信息', trigger: 'blur'}
        ]
      },
    }

  },


  methods: {

    //提交数据——批量提交
    handleInputMulti(res, file, fileList) {
      //导入成功
      if (res.code === '200') {
        // this.load() //重新加载数据
        this.$message.success("批量导入成功！")
      } else {//导入失败
        this.$message.error(res.msg)
      }

    },

    //提交数据——单个提交
    submitSingle() {
      //验证输入合法性
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //验证通过
          //发送到后端
          this.$request.post('/product/submitSingle', this.ruleForm).then(res => {
            //发送数据
            if (res.code === '200') {
              this.$message.success('提交数据成功！')
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error('请完善表单相关信息！');
        }
      });

    },

    //重置表单-清空
    resetForm() {
      this.$refs.ruleForm.resetFields()
    }

  },

  mounted() {
    request.get('/product/selectAll').then(res => {
      this.proInfo = res.data
    })
  }

}


</script>

<style scoped>

.container_input {
  display: flex;
  flex-direction: column;
}

.div-item {
  height: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
  padding: 20px 5px 5px 100px;
  border: 1px solid #ccc;
  align-items: center;
}

.ctrl_button {
  flex: 1;
  padding: 5px 5px 5px 150px;
  border: 1px solid #ccc;
}

.box3 {
  height: 70%;
  background-color: #cccccc; /* 仅用于视觉效果 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 5px;
}

</style>